<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.js"></script>
</head>
<style>
    body {
        background-color: #303038;
    }

    #demo {
        width: 30vw;
        height: 40vh;
        /* background-color: #303038; */
        background-color: #ffffff;
        margin: 0 auto;
        margin-top: 200px;
    }
</style>

<body>

    <div id="demo"></div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        var colorList = ["#45cd9b", "#f89e3d ", "#0f91f3", "#1eb5e0", "#e5bd1d", "#809ff9", "#ea4a4a", "#E0EEE0", "#DDA0DD"]
        var res = {
            code: 100,
            msg: "成功",
            result: [
                {
                    companyId: 301,
                    storehouseName: "讯轻科技的环境夫款讯轻科技哈很快就阿士",
                    orderNum: 402
                }, {
                    companyId: 301,
                    storehouseName: "讯轻科技哈很快就阿士大夫款哈2的",
                    orderNum: 62
                }, {
                    companyId: 301,
                    storehouseName: "讯轻科技哈很快就阿士大夫款哈3的",
                    orderNum: 32
                }, {
                    companyId: 301,
                    storehouseName: "讯轻科技哈的4",
                    orderNum: 462
                }, {
                    companyId: 301,
                    storehouseName: "讯轻科技哈弗的5",
                    orderNum: 692
                }
                , {
                    companyId: 301,
                    storehouseName: "讯轻科技哈很快就阿士大夫",
                    orderNum: 362
                }
            ]
        }
        var data = [];
        res.result.forEach(function (item, i) {
            data.push({
                name: item.storehouseName,
                value: item.orderNum
            })
        })
        var myChart = echarts.init(document.getElementById('demo'));
        // 指定图表的配置项和数据
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{b} <br/>{a}:  ({d}%)'
            },
            grid: {
                left: '10%',
                right: '10%'
            },
            series: [
                {
                    color: colorList,
                    name: '运单占比',
                    type: 'pie',
                    radius: ['0%', '55%'],
                    label: {
                        formatter: function (parmas) {
                            // console.log(parmas.data)
                            // console.log(parmas.seriesName)
                            // console.log(parmas.percent)
                            if (parmas.name.length > 8) {
                                console.log(parmas.name)
                                return parmas.name.slice(0, 8) + '...' + '\n' + parmas.seriesName + ':' + parmas.percent + '%'
                            } else {
                                return parmas.name + '\n' + parmas.seriesName + ':' + parmas.percent + '%'
                            }
                        },
                        align: 'left',
                        padding: 10,
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                    },
                    data: data
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.onresize = function () {
            console.log(1)
            myChart.resize()
        }

    </script>



</body>

</html>